<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
		<!--头部信息-->
		<view class="head">
			<view class="headitem">
				<view class="glod">{{userinfo.integral}}<text>币</text></view>
				<view @click="gotoconver" class="head-botton">去兑换<text>›</text></view>
			</view>
			<view class="headitem">
				<view class="glod">{{userinfo.money}}<text>元</text></view>
				<navigator url="/pages/cash/cash" class="head-botton">去提现<text>›</text></navigator>
			</view>
			<view class="line"></view>
		</view>

		<view class="linebgimg">
			<image class="line-img" src="/static/image/lines.png" mode="aspectFill"></image>
		</view>

		<!--appicon图标-->
		<view class="appcontainer">
			<view class="appicon">
				<view class="icon-item" v-for="(item,index) in indexmenu" :key="index" @click="navgoto(item.url,index)">
					<image :src="item.icon" mode="aspectFill"></image>
					<view class="appicontext">
						<text>{{item.title}}</text>
						<view v-if="!apptouchday[index]" class="origins"></view>
					</view>
					<image v-if="item.title=='话费充值'" class="zhekou" src="../../static/image/zhekou.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!--锦鲤广场-->
		<view class="square">
			<view class="square-left">
				<image src="/static/image/laba2.png" mode="aspectFill"></image>
			</view>
			<view class="square-right">
				<!-- <view class="swiper">
					<text-scroll :textarr="mascot"></text-scroll>
				</view> -->
				<swiper class="swiper" autoplay="true" disable-touch="true" vertical="true"> 
					<swiper-item v-for="(item,index) in mascot" :key="index">
						<navigator :url="item.url" class="textwidth" >{{item.title}}</navigator> 
					</swiper-item>
				</swiper>
				<navigator url="/pages/notice/notice" class="swipermore">
					<view style="margin-right: 5rpx;">更多</view>
					<view> ›</view>
				</navigator>
			</view>
		</view>

		<!--推荐福利-->
		<view class="welfarebox">
			<view class="guide" v-if="isshowGuide">
				<image src="/static/image/finger.png" mode="aspectFill"></image>
				<view class="guideinfo">
					<view class="guidesanjiao"></view>
					<view class="guidetext">点击参与抽奖</view>
				</view>
			</view>
			<view class="welfare-head">
				<text class="welfare-title">推荐福利</text>
				<view class="extension">
					<view @click="gotoindex">我要上首页</view>
					<text style="margin: 0 20rpx;">|</text>
					<text @click="sharequn">分享</text>
				</view>
			</view>
			<navigator :url="(item.pType=='red_envelope'?'/pages/bagdraw/drawpage':'/pages/lottery/lottery')+'?id='+item.id"
			 class="welfare-item" v-for="(item,index) in listdata.recommend" :key="index">

				<view class="imagebox">
					<image :src="item.thumb" mode="aspectFit"></image>
					<!-- 	<easy-loadimage v-else mode="widthFix" :scroll-top="scrollTop" loading-mode="spin-circle" :image-src="item.thumb"></easy-loadimage> -->
				</view>
				<view class="textinfo">
					<view class="text-title yellowfont " v-if="item.pType=='red_envelope'">奖品：<text class="red-envelope-type">{{item.red_envelope_type=="sign"?'普':'拼'}}</text>{{item.title}}</view>
					<view class="text-title" v-else>奖品：{{item.title.length>16?item.title.substring(0,16)+'...':item.title}}<text>x{{item.pCount}}份</text></view>
					<view class="text-types">{{item.draw_type}}<text class="boost" v-if="item.boost>0">助力</text> </view>
					<!-- <view>参与条件：<text class="tip">体验APP1分钟</text></view> -->
				</view>
				<!--是否参与icon-->
				<image v-if="item.iId" class="canyuicon" src="../../static/image/alreadyInvolved.png" mode="aspectFill"></image>
				<!--赞助商-->
				<view v-if="item.bAuth==2 && item.pType =='goods'" class="authicon">
					<image src="/static/image/authicon.png"></image>
					<text>{{item.bTitle}}</text>
				</view>
				<view class="sponsor" v-else>{{item.bTitle}} 赞助</view>
			</navigator>
		</view>
		<!--精品福利-->
		<view class="boutique" v-if="listdata.excellent.length>0">
			<view class="item-head">精品福利</view>
			<swiper class="boutique-item" autoplay="true">
				<swiper-item v-for="(item,index) in listdata.excellent" :key="index" class="swiperbox">
					<view class="boutique-cell" @click="gotodetail(index,excellentindex)" v-for="(excellentitem,excellentindex) in item"
					 :key="excellentindex">
						<view class="tupian">
							<image :src="excellentitem.thumb" mode="widthFix"></image>
							<view class="canyuxin" v-if="excellentitem.iId"></view>
						</view>
						<view class="prizeinfo">
							<view class="boutique-title">
								<view class="eli">奖品：{{excellentitem.title}}</view><text>x{{excellentitem.pCount}}份</text>
							</view>
							<view v-if="excellentitem.bAuth==2" class="provider-auth">
								<view class="imgauth"></view>
								<view class="contentext">{{excellentitem.bTitle}}</view>
							</view>
							<text class="provider" v-else>{{excellentitem.bTitle}} 赞助</text>
							<text>{{excellentitem.draw_type}} </text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!--自助福利-->
		<view class="selfhelp">
			<view class="item-head">自助福利</view>
			<navigator :url="(item.pType=='red_envelope'?'/pages/bagdraw/drawpage':'/pages/lottery/lottery')+'?id='+item.id"
			 class="self-item" v-for="(item,index) in listdata.self" :key="index">
				<view class="self-img">
					<image :src="item.thumb" mode="aspectFill"></image>
				</view>
				<view class="self-text">
					<view class="self-title">
						<view class="eli">奖品：{{item.title}}</view><text>x{{item.pCount}}份</text>
					</view>
					<view v-if="item.bAuth==2" class="self-auth">
						<view class="imgauth"></view>
						<view class="contentext">{{item.bTitle}}</view>
					</view>
					<text class="self-provider" v-else>{{item.bTitle}} 赞助</text>
					<text>{{item.draw_type}}</text>
				</view>
				<view class="canyuxin" v-if="item.iId"></view>
			</navigator>
		</view>

		<!--我要上首页-->
		<view @click="gotoindex" class="pushtop">我要上首页<text>›</text></view>
		<!--轮播图广告-->
		<adver advertype="index" :lineobject="{width:'72%',left:'220rpx'}"></adver>
		<view style="height: 50rpx;"></view>
		<!--用户首次红包弹窗-->
		<firstredbg @getmember="getmember" :redbagvisible="visible" :maintitle="redbagobject.maintitle" :subtitle="redbagobject.subtitle"
		 :redbagobject="redbagobject" maxamount="1.88" @openfixredbag="openfixredbag" jointip="实名认证后的用户才可提现哦~"></firstredbg>

		<!--参与抽奖领红包进度-->
		<redbagfix ref="redbagfix" v-if="dayredbagshow" @closefixredbag="closefixredbag"></redbagfix>

		<!--加载遮罩-->
		<loadingpage v-if="globelloading"></loadingpage>
	</mescroll-body>
</template>

<script>
	const subNVue = uni.getSubNVueById('map_widget')
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				isshowGuide: false, //是否需要用户引导
				globelloading: true, //全局加载
				redbagobject: {
					icon: 'newuser', //显示新人专享图标
					rand: true, //是否出现随机值
					maintitle: '新人红包待领取', //主标题
					subtitle: '首次进入天天有礼专享', //副标题
					maxamount: 1.88 //最高随机金额 
				},
				listdata: {
					excellent: []
				}, //抽奖列表数据
				xdata: 2,
				userinfo: '',
				visible: false, //显示和隐藏alret框
				//下拉参数配置
				downOption: {
					// inOffsetRate:610,
					// offset:520,
					auto: false, //是否在初始化后,自动执行downCallback; 默认true
					bgColor: "#378aff",
					textLoading: '玩命加载中...',
					outOffsetRate: 0,
					autoShowLoading: false, //自动执行一次下来 
					textSuccess: "刷新成功"
				},
				//上拉参数配置
				upOption: {
					use: false
				},
				mascot: [], //新闻公告
				apptouchday: [], //已触发的数组
				indexmenu: [], //首页app图标
				dayredbagshow: true, //是否显示每日进度红包
				// scrollTop: 0,
				// navdata: {
				// 	nn: 11,
				// 	aa: 222
				// }
			}
		},
		// onPageScroll({
		// 	scrollTop
		// }) {
		// 	//传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		// 	//console.log(scrollTop);
		// 	this.scrollTop = scrollTop;
		// },
		onLoad() {
			uni.$on('closeupdate_componet', () => {
				const subNVue = uni.getSubNVueById('map_widget')
				subNVue.hide('fade-out', 300)
			})

			uni.$on("closewindown", (option) => {
				//关闭alret提示框
				this.visible = option;
				//如果进度红包未开启，则开启红包进度
				if (this.dayredbagshow) {
					//需异步刷新进度数据 
					this.$nextTick(function() {
						this.$refs.redbagfix.bagprgress(true);
					})
				}
			})
			//获取初始数据
			this.init();
			//首次欢迎红包
			this.alreayred();
			//console.log(uni.getStorageSync('user_info')) 
			//检测更新本版
			this.testVersion();
			
		},

		onShow() {
			//获取内存中用户新
			this.getmember();
			//获今日是否已触发的app图标
			if (this.indexmenu.length) {
				this.apptouchs();
			}
		},
		//监听关闭悬浮红包
		computed: {
			fixisshow() {
				//console.log('我这里通知关闭1！')
				return this.$common.state.fixredbagshow;
			},
			isjoindreaw() {
				//奖品ID是否改变
				return this.$common.state.dreawid;
			},
			guideflags() {
				//是否需要引导
				return this.$common.state.ttylguide;
			}
		},

		watch: {
			indexmenu(values) {
				this.apptouchs();
			},
			//关闭悬浮红包
			fixisshow(value) {
				//console.log('我这里通知关闭！',value)
				this.dayredbagshow = value;
			},
			isjoindreaw(id) {
				this.joinnow(id);
			},
			//数据改消失
			listdata() {
				setTimeout(() => {
					this.globelloading = false;
				}, 800)
			},
			guideflags(option) {
				this.isshowGuide = option
			}

		},
		
		methods: {
			//设置个人中心通知角标 (setTabBarBadge(数字) showTabBarRedDot(红点)移除(removeTabBarBadge,hideTabBarRedDot))
			messageshow(){
				this.$HttRequest({
					url: '/message/list',
					param: ''
				}).then(res=>{
					if (res.data.length > 0) {
						uni.showTabBarRedDot({
							index: 3
						})
						this.$common.state.messagecount = res.data.length
					} 
				}).catch(error=>{
					this.$ShowMsg('error::'+JSON.stringify(error))
					console.log(error)
				})
			},
			
			//我要上首页
			gotoindex() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=https://recharge.607068.com/rg-static/extension.html'
				})
			},
			//APP更新提醒
			testVersion() {
				console.log('拉取更新数据')
				this.$HttRequest({
					url: '/index/version',
					param: {
						"appid": plus.runtime.appid
					}
				}).then(res => {
					console.log(res)
					let ttylVersion = (plus.runtime.version).split('.').join('')
					if (plus.os.name == 'Android') {
						//安卓版本比较
						if (res.data.and_new_version > ttylVersion) {
							//是否需要唤醒子窗体
							subNVue.show('slide-in-bottom', 300, () => {
								//处理版本号信息
								res.data.android_version = 'V' + (res.data.and_new_version).split('').join('.')
								//需要强制更新时隐藏关闭按钮
								res.data.android_closebutton = res.data.and_min_version > ttylVersion ? false : true
								uni.$emit('page-popup', {
									data: res.data
								})
								console.log(res.data, 'android')
							})
						}
					} else if (plus.os.name == 'iOS') {
						//IOS版本比较
						if (res.data.new_version > ttylVersion) {
							subNVue.show('slide-in-bottom', 300, function() {
								//处理版本号信息
								res.data.ios_version = 'V' + (res.data.new_version).split('').join('.')
								//需要强制更新时隐藏关闭按钮
								res.data.ios_closebutton = res.data.min_version > ttylVersion ? false : true
								uni.$emit('page-popup', {
									data: res.data
								})
								console.log(res.data, 'ios')
							})
						}
					}
				}).catch(error => {
					console.log(error);
				})
			},
			//去兑换商城
			gotoconver() {
				uni.switchTab({
					url: '/pages/convert/convert'
				})
			},
			//精品福利到详情
			gotodetail(bigindex, smallindex) {
				let excitem = this.listdata.excellent[bigindex][smallindex]
				let url = '/pages/lottery/lottery?id=' + excitem.id
				if (excitem.pType == 'red_envelope') {
					url = '/pages/bagdraw/drawpage?id=' + excitem.id
				}
				uni.navigateTo({
					url: url
				})
			},

			//查找对应抽奖ID处理成已参与
			joinnow(dreaw_id) {
				//修改奖品ID的数据
				this.listdata['recommend'].map((item, index) => {
					// console.log(item);
					if (item.id == dreaw_id) {
						this.listdata['recommend'][index].iId = 1;

					}
				})
				this.listdata['excellent'].map((item, index) => {
					if (item.id == dreaw_id) {
						this.listdata['excellent'][index].iId = 1;
					}
				})
				this.listdata['self'].map((item, index) => {
					if (item.id == dreaw_id) {
						this.listdata['self'][index].iId = 1;

					}
				})
			},

			//分享朋友或群
			sharequn() {
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "https://recharge.607068.com/thirdParty/app/invite?state=" + this.userinfo.recommend_id,
					title: '【' + this.userinfo.nickname + '】' + '@你参与免费抽奖',
					summary: '天天有礼拥有众多商家提供的各类精美奖品，所有用户均可免费参与抽奖，中奖后的用户即可获得对应奖品',
					imageUrl: 'https://fission-com.oss-cn-beijing.aliyuncs.com/rg-static/image/logo/72x72.png',
					success: function(res) {
						_this.$ShowMsg('分享朋友朋友或群成功！')
					},
					fail: function(err) {
						console.log(err);
						_this.$ShowMsg('分享朋友失败！')
					}
				});
			},
			
			closefixredbag() {
				this.dayredbagshow = false;
			},
			//打开红包进度
			openfixredbag() {
				this.dayredbagshow = true;
				this.$nextTick(function() {
					this.$refs.redbagfix.bagprgress(true);
				})
			},
			//图片加载完成
			onImageLoad(key, index) {
				//加载完之后显示图片
				this.$set(this.listdata[key][index], 'loaded', 'loaded');
			},
			//图片加载失败
			imgerror(error) {
				console.log(error)
			},
			//用户是否领取过新人红包
			alreayred() {
				this.$HttRequest({
					url: '/redEnvelope/welcomeReceive',
					param: ''
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						//reward为true弹出新人红包
						if (res.data.reward) {
							this.ejectredbag();
							this.dayredbagshow = false;
						}
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
				});
			},

			//今日是否触发APP图标
			apptouchs() {
				let ttyldate = new Date();
				let apptouchdays = uni.getStorageSync('apptouchday');
				//如果没有今天的触发数组则创建当天触发数组
				if (!apptouchdays || apptouchdays[apptouchdays.length - 1] != ttyldate.getDate()) {
					let tempapp = [];
					this.indexmenu.map((item, index) => {
						tempapp[index] = false;
					})
					tempapp[tempapp.length] = ttyldate.getDate();
					uni.setStorageSync('apptouchday', tempapp);
				}
				this.apptouchday = uni.getStorageSync('apptouchday');
				// console.log(this.apptouchday[this.apptouchday.length-1]);
				// console.log(this.apptouchday); 
				//uni.removeStorageSync('apptouchday');
			},

			/*下拉刷新的回调 */
			downCallback() {
				this.$HttRequest({
					url: '/lottery/lists',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						//console.log(res.data)
						this.listdata = res.data.list;
						//this.getmember()
						//this.userinfo = uni.getStorageSync('user_info');
						//更新用户的金额和金额
						let assets = {
							integral: res.data.integral,
							money: res.data.money,
						}
						this.userassets(assets);
						if (this.dayredbagshow) {
							this.$nextTick(function() {
								this.$refs.redbagfix.bagprgress(false);
							})
						}
						//是否显示个人中心角标
						this.messageshow()
					} else {
						this.$ShowMsg(res.message)
					}
					this.mescroll.endSuccess();
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error)
					this.mescroll.error();
				});
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log(page);
			},

			//获取首页初始数据
			init() {
				this.$HttRequest({
					url: '/index/index',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						console.log(res);
						this.mascot = res.data.mascot;
						this.indexmenu = res.data.menu;
						//更新用户的金额和金额
						let assets = {
							integral: res.data.integral,
							money: res.data.money,
						}
						this.userassets(assets);
						//是否显示进度红包
						if (this.dayredbagshow) {
							this.$nextTick(function() {
								this.$refs.redbagfix.bagprgress(true)
							})
						}
						//获取抽奖数据列表
						this.drawlist()
						//是否显示个人中心角标
						this.messageshow()
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error);

				});
			},
			//更新用户的金币和提现金额
			userassets(obj) {
				for (let key in obj) {
					this.$changefield(key, obj[key])
				}
				this.getmember();
			},

			//或抽奖列表
			drawlist() {
				this.$HttRequest({
					url: '/lottery/lists',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						//console.log(res.data)
						this.listdata = res.data.list;
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error)
				});
			},

			// 获取用户信息
			getmember() {
				this.userinfo = uni.getStorageSync('user_info')
				//是否需要出现引导
				this.$common.state.ttylguide = this.userinfo.lottery_app 
				console.log(this.$common.state.ttylguide); 
				console.log(this.userinfo) 
			},

			//是否要弹出红包
			ejectredbag() {
				this.$nextTick(() => {
					setTimeout(() => {
						this.visible = true
					}, 1500)
				})
			},

			navgoto(path, index) {
				uni.navigateTo({
					url: path + '?index=' + index
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.linebgimg {
		background-color: #fff;
		position: relative;

		.line-img {

			width: 750rpx;
			height: 105rpx;
			position: absolute;
			top: -40rpx;

		}
	}

	//红色小原点
	.origin {
		border-radius: 50%;
		width: 10rpx;
		height: 10rpx;
		position: absolute;
		right: -12rpx;
		bottom: 58rpx;
		background-color: #fa5151;
	}

	.zhekou {
		position: absolute;
		top: -10rpx;
		right: -50rpx;
		transform: rotate(20deg);
		transform-origin: 50% 100%;
		animation: doudong 1.2s infinite;
	}

	@keyframes doudong {
		0% {
			transform: rotate(20deg);
		}

		50% {
			transform: rotate(15deg);
		}

		60% {
			transform: rotate(18deg);
		}

		80% {
			transform: rotate(20deg);
		}

		100% {
			transform: rotate(20deg);
		}
	}

	.scroll {
		height: 100vh;
	}




	.pushtop {
		color: #2c6ecc;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx 0;
		margin-bottom: 50rpx;

		text {
			margin-left: 10rpx;
		}
	}

	.canyuxin {
		position: absolute;
		top: 15rpx;
		left: 0;
		width: 109rpx;
		height: 42rpx;
		background-image: url(../../static/image/alreadyInvolved.png);
		background-size: 109rpx 42rpx;
		background-repeat: no-repeat;
	}

	.selfhelp {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;

		.self-item {
			position: relative;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #808080;
			background-color: #fff;
			margin-bottom: 20rpx;
			font-size: 22rpx;

			.self-img {
				width: 180rpx;
				height: 180rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 20rpx;
				overflow: hidden;

				image {
					width: 200rpx;
					height: 107rpx;
				}
			}

			.self-text {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;

				.self-title {
					width: 520rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 30rpx;
					color: #000;
					flex-wrap: nowrap;

					text {
						color: #808080;
					}

					.eli {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 78%;

					}
				}

				.self-provider {
					background-color: #f0f0f0;
					padding: 10rpx;
					border-radius: 10rpx;
					margin: 8rpx 0;
				}

				.self-auth {
					font-size: 25rpx;
					margin: 8rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 35rpx;
					border: 1rpx $uni-color-primary solid;
					color: $uni-color-primary;
					border-radius: 10rpx;
					padding: 0;

					.contentext {
						padding: 0 10rpx;
					}

					.imgauth {
						border-top-left-radius: 10rpx;
						border-bottom-left-radius: 10rpx;
						width: 36rpx;
						height: 35rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: $uni-color-primary;
						background-image: url(../../static/image/authicon.png);
						background-repeat: no-repeat;
						background-position: center;
						background-size: 30rpx 29rpx;
					}

				}
			}

			image {
				width: 187rpx;
				height: 147rpx;
				margin: 30rpx;
			}
		}
	}

	.boutique {
		flex: 1;
		display: flex;
		flex-direction: column;

		.boutique-item {
			width: 100%;
			height: 310rpx;
			padding: 20rpx 0;
			padding-top: 0;
			white-space: nowrap;
			background-color: #fff;

			.boutique-cell {
				display: inline-block;
				color: #808080;
				font-size: 22rpx;
				width: 350rpx;
				height: 240rpx;
				margin: 0 18rpx;

				.tupian {
					position: relative;
					width: 330rpx;
					height: 147rpx;
					border: 1rpx solid #f0f0f0;
					display: flex;
					justify-content: center;
					align-items: center;
					// padding: 10rpx 0;
					margin: 20rpx 0;

					image {
						// width: 187rpx;
						// height: 147rpx;
						// margin: 20rpx 0;
						width: 250rpx;
					}
				}

				.prizeinfo {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;

					.boutique-title {
						font-size: 25rpx;
						color: #000;
						width: 330rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.eli {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 78%;

						}

						text {
							color: #808080;
						}
					}

					.provider-auth {

						margin: 10rpx 0;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 30rpx;
						border: 1rpx $uni-color-primary solid;
						color: $uni-color-primary;
						border-radius: 10rpx;

						.contentext {
							padding: 0 10rpx;
						}

						.imgauth {
							border-top-left-radius: 10rpx;
							border-bottom-left-radius: 10rpx;
							width: 31rpx;
							height: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: $uni-color-primary;
							background-image: url(../../static/image/authicon.png);
							background-repeat: no-repeat;
							background-position: center;
							background-size: 26rpx 25rpx;
						}

					}

					.provider {
						background-color: #f0f0f0;
						padding: 5rpx;
						border-radius: 10rpx;
						margin: 10rpx 0;
					}
				}


			}


		}

		.boutique-item::-webkit-scrollbar {
			display: none;
		}
	}

	.item-head {
		color: #e9564f;
		font-size: 32rpx;
		font-weight: bold;
		height: 100rpx;
		padding-left: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.welfarebox {
		display: flex;
		flex-direction: column;
		position: relative;

		.guide {
			position: absolute;
			display: flex;

			justify-content: center;
			align-items: center;
			flex-direction: column;
			z-index: 999;
			top: 350rpx;
			right: 50rpx;
			animation: updown 1.5s infinite;

			image {
				width: 130rpx;
				height: 119rpx;
			}

			.guideinfo {
				width: 180rpx;
				height: 65rpx;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				flex-direction: column;

				.guidesanjiao {
					margin-right: 50rpx;
					width: 0;
					height: 0;
					border-bottom: 8rpx solid $uni-color-primary;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
				}

				.guidetext {
					background-color: $uni-color-primary;
					font-size: 25rpx;
					color: #fff;
					width: 180rpx;
					height: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 15rpx;
					padding: 0 5rpx;

				}
			}
		}

		.welfare-head {
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 23rpx;
			color: #808080;
			height: 60rpx;

			.welfare-title {
				color: #e9564f;
				font-size: 32rpx;
				font-weight: bold;
			}

			.extension {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
			}
		}

		.welfare-item {
			position: relative;
			color: #808080;
			font-size: 25rpx;
			background-color: #fff;
			margin-top: 20rpx;

			.imagebox {
				width: 750rpx;
				height: 400rpx;
				background-image: url('/static/image/topdefault.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.authicon {
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top-left-radius: 20rpx;
				position: absolute;
				border-bottom-left-radius: 20rpx;

				background-color: $uni-color-primary;
				padding: 10rpx 20rpx;
				top: 20rpx;
				right: 0;
				z-index: 999;

				image {
					width: 30rpx;
					height: 29rpx;
					margin-right: 10rpx;
				}
			}

			.sponsor {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				height: 32rpx;
				padding: 10rpx 20rpx;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				background: rgba(#000, 0.5);
				color: #fff;
				z-index: 999;
				top: 20rpx;
				right: 0;
			}

			.canyuicon {
				display: block;
				width: 109rpx;
				height: 40rpx;
				position: absolute;
				top: 20rpx;

			}

			image {
				width: 750rpx;
				height: 400rpx;
			}

			.textinfo {
				display: flex;
				flex-direction: column;
				margin: 20rpx 0;
				margin-left: 35rpx;

				.text-types {
					margin: 10rpx 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.boost {
						margin: 0 10rpx;
						font-size: 22rpx;
						width: 80rpx;
						height: 35rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						border-radius: 20rpx;
						background-color: $uni-color-primary;
					}
				}

				.text-title {
					font-size: 35rpx;
					color: #000;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: flex-start;

					.eli {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 75%;
					}

					text {
						color: #808080;
					}
				}


				.yellowfont {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					color: #b39004;

					.red-envelope-type {
						width: 38rpx;
						height: 38rpx;
						font-size: 25rpx;
						color: #fff;
						background-color: #dead61;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 8rpx;
						margin-right: 10rpx;
					}

					text {
						color: #b39004;
					}
				}

				.tip {
					background-color: #e1fdef;
					color: #0dd68e;
					padding: 8rpx;
					border-radius: 10rpx;
					font-size: 22rpx;
				}
			}
		}
	}

	//动画开始
	@keyframes updown {
		0% {
			top: 350rpx;
			right: 50rpx;
		}

		50% {
			top: 320rpx;
			right: 80rpx;
		}

		100% {
			top: 350rpx;
			right: 50rpx;
		}

		// from{
		// 	top: 350rpx;
		// 	right: 50rpx;
		// }
		// to{
		// 	top: 330rpx;
		// 	right: 60rpx;
		// }
	}

	.square {
		width: 100vw;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #ababab;
		font-size: 25rpx;
		background-color: #fff;
		margin-top: 1rpx;
		margin-bottom: 10rpx;

		.square-right {
			padding: 0 20rpx;
			height: 90rpx;
			flex: 8;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.swipermore {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				width: 80rpx;
			}

			.swiper {
				width: 580rpx;
				height: 40rpx;

				.textwidth {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
				}
			}

			text {
				width: 60rpx;
				font-size: 40rpx;
				margin-left: 10rpx;

			}
		}

		.square-left {
			display: flex;
			flex: 1;


			justify-content: center;
			align-items: center;
			margin-left: 20rpx;

			image {
				width: 42rpx;
				height: 42rpx;
			}
		}

	}

	.appcontainer {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		background-color: #FFFFFF;

		.appicon {
			position: relative;
			width: 80%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 220rpx;

			.icon-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.appicontext {
					display: flex;
					justify-content: flex-start;
					flex-wrap: nowrap;

					.origins {
						border-radius: 50%;
						width: 10rpx;
						height: 10rpx;
						background-color: #fa5151;
					}
				}

				image {
					width: 95rpx;
					height: 95rpx;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 25rpx;
					color: #1a1a1a;
				}
			}
		}
	}




	.head {
		width: 100vw;
		height: 350rpx;
		background-color: $uni-color-primary;
		color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		padding-top: 30rpx;

		.line {
			height: 110rpx;
			border-left: 2rpx #fff solid;
			opacity: 0.3;
			position: absolute;
			top: 150rpx;
			left: 380rpx;
		}

		.headitem {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.glod {
				font-size: 80rpx;
				font-weight: bold;

				text {
					font-size: 25rpx;
					font-weight: normal;
					margin-left: 5rpx;
				}
			}

			.head-botton {
				box-shadow: 0 0 15rpx #2b79e7;
				font-size: 22rpx;
				font-weight: normal;
				color: $uni-color-primary;
				background-color: #e9f1fd;
				padding: 8rpx 20rpx;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					margin-left: 10rpx;
				}
			}
		}
	}

	// .head::after{
	// 	content: '';  
	// 	width: 140%;
	// 	height: 300rpx;
	// 	position: absolute;  
	// 	border-radius: 0 0 95% 95%;  
	// 	top:10%;
	// 	left:-20%;
	// 	background: #2b79e7;
	// 	z-index: 1111;
	// }
</style>
